<template>
<div class="m">
    <!-- Form -->
    <el-form ref="forms" :model="forms" :rules="rules" label-width="100px" style="width: 100%;">
        <el-row type="flex" class justify="start">
           <el-col :span="8">

                <el-form-item label="类别" prop="power">
                    <el-select v-model="forms.power" style="width: 80%;">
                        <el-option v-for="item in powers" :key="item.id" :label="item.label" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="8">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="forms.name" style="width: 80%;"></el-input>
                </el-form-item>
            </el-col>
        </el-row>


        <el-row type="flex" class justify="start">
            <el-col :span="8">
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="forms.password" autocomplete="off" show-password style="width: 80%;"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="8">
                <el-form-item label="确认密码" prop="checkpassword">
                    <el-input type="password" v-model="forms.checkpassword" autocomplete="off" style="width: 80%;"></el-input>
                </el-form-item>

            </el-col>
        </el-row>

        <el-form-item>
            <el-button size="medium" type="primary" @click="onSubmit('forms')">立即添加</el-button>
            <el-button size="medium" type="warning" @click="resetForm('forms')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<!-- <h1 style="position: absolute; bottom: 3%; right: 5%;"> 10511工作室&nbsp;版权所有</h1> -->
</template>

<script>
//引入mapState
import Qs from "qs";
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.forms.checkpassword !== '') {
                    this.$refs.forms.validateField('checkpassword');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.forms.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {

            forms: {
                "name": "",
                "password": "",
                "checkpassword": "",
                "power": "",
            },
            dialogFormVisible: true,
            formLabelWidth: "200px",
            types: [{
                id: '1',
                label: '在线'
            }, {
                id: '0',
                label: '离线'
            }, {
                id: '2',
                label: '禁用'
            }, ],

            powers: [{
                id: '0',
                label: '管理'
            }, {
                id: '1',
                label: '用户'
            }, {
                id: '2',
                label: '其他'
            }, ],
            rules: {
                password: [{
                    validator: validatePass,
                    trigger: 'blur'
                }],
                checkpassword: [{
                    validator: validatePass2,
                    trigger: 'blur'
                }],
            }
        };

    },
    methods: {    
        
     //确定添加后，向后台发起请求
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.forms);
                     Object.assign(this.forms, {
                "oper": "5",
            })
                    this.$axios({
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded"
                        },
                        method: "post",
                        transformRequest: [
                            function (data) {
                                // 对 data 进行任意转换处理
                                return Qs.stringify(data);
                            }
                        ],
                        url: "./action/user_man",
                        data:this.forms
                    }).then(res => {
                        if (res.data) {
                            this.$store.dispatch("GET_USERINFO");
                            alert("添加成功！");
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        resetForm(formName) {
            console.log("触发重置!");
            try {
                this.$refs[formName].resetFields();
            } catch (error) {
                console.log(error);
            }
        }
    }
};
</script>

<style scoped>
.el-upload-list__item-name {
    border: 1px solid grey;
}

.el-input__inner {
    border: sandybrown;
}

.upload-demo {
    margin-left: 20px;
}

.el-button .el-button--primary .el-button--small {
    float: left;
}

.el-upload-list__item is-ready {
    width: 50%;
}

.el-upload-list__item {
    display: block;
    width: 200px;
    float: left;
}

.el-col-5 {
    width: 160px;
    height: 40px;
}

.m {
    margin-left: 200px;
    margin-top: 20px;
}

.el-select .el-input__inner {
    width: 100px;
}

.el-input {
    width: 150px;
}

.top {
    height: 40px;
    background-color: aqua;
    line-height: 40px;
    text-align: center;
    padding: 20px;
}

h1 {
    display: block;
    float: left;
    margin-left: 10%;
}

.el-select {
    display: block;
    float: left;
    line-height: 40px;
    width: 150px;
    height: 40px;
}

.el-pagination {
    display: block;
}

.el-table .warning-row {
    background: oldlace;
    text-align: center;
}

.el-table .success-row {
    background: #f0f9eb;
    text-align: center;
}

.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}
</style>
